<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-12-19 14:41:48
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-01-12 15:39:38
 * @FilePath: \cxl-driving-training\src\views\channel\list\Index.vue
-->
<template>
    <div class="page-box">
        <TemplateVue
            :page="data.pageData"
            @search="data.onSearch"
            @reset="data.onReset"
            @paginationChange="data.onPaginationChange"
            @paginationSize="data.onPaginationSize"
            @operation="data.onOperation"
        >
        </TemplateVue>
        <BasicDialogVue :data="data.dialog" @close="data.onCloseDialog(dialogForm)">
            <template #content>
                <el-form ref="dialogForm" :model="data.dialogForm" label-width="100px" :rules="data.rules">
                    <el-form-item label="渠道名称：" prop="channel">
                        <el-select clearable v-model="data.dialogForm.channel">
                            <el-option
                                v-for="itemOption in data.channelNameOptions"
                                :key="itemOption.value"
                                :label="itemOption.label"
                                :value="itemOption.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="投放类型：" prop="deliveryType">
                        <el-select clearable v-model="data.dialogForm.deliveryType">
                            <el-option
                                v-for="itemOption in data.deliveryTypeOptions"
                                :key="itemOption.value"
                                :label="itemOption.label"
                                :value="itemOption.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="渠道地址：" prop="url">
                        <div style="display: flex; width: 100%">
                            <el-input
                                placeholder="请输入渠道地址"
                                v-model="data.dialogForm.url"
                                readonly
                                type="text"
                                clearable
                                style="flex: 1"
                            />
                            <el-button type="primary" style="margin-left: 16px" @click="data.onGetPromotionUrl"
                                >生成渠道地址</el-button
                            >
                        </div>
                    </el-form-item>
                    <el-form-item label="投放期限：" prop="time">
                        <div class="time">
                            <el-radio-group v-model="data.dialogForm.time">
                                <el-radio v-for="item in data.timeOptions" :key="item.value" :label="item.value">{{
                                    item.label
                                }}</el-radio>
                            </el-radio-group>
                            <template v-if="Number(data.dialogForm.time) === 2">
                                <el-input
                                    style="width: 120px; margin: 0 8px 0 16px"
                                    placeholder="请输入投放期限"
                                    v-model="data.dialogForm.otherTime"
                                    type="number"
                                    clearable
                                />天
                            </template>
                        </div>
                    </el-form-item>
                    <el-form-item label="备注：">
                        <el-input
                            v-model="data.dialogForm.remark"
                            type="textarea"
                            clearable
                            placeholder="请输入备注说明"
                        />
                    </el-form-item>
                </el-form>
                <div class="btn">
                    <el-button @click="data.onCloseDialog(dialogForm)">取消</el-button>
                    <el-button type="primary" @click="data.submitForm(dialogForm)">确定</el-button>
                </div>
            </template>
        </BasicDialogVue>
    </div>
</template>
<script setup lang="ts">
import TemplateVue from '@/components/template/Index.vue'
import ChannelListData from '.'
import { reactive, ref } from 'vue'
import BasicDialogVue from '@/components/baseDialog/Index.vue'

const data = reactive(new ChannelListData())

const dialogForm = ref()
</script>

<style scoped lang="scss">
.time {
    display: flex;
}
.btn {
    display: flex;
    justify-content: center;
    margin: 40px 0 16px 0;
}
</style>
